import { useIntersectionObserver } from '@vueuse/core'
// 插件
export const lazyImg = {
  install(app: any) {
    app.directive('img-lazy', {
      mounted(el: any, binding: any) {
        //el指令绑定到的元素。这可以用于直接操作 DOM
        //binding: binding.value 指令等于后面绑定表达式的值 图片url
        const { stop } = useIntersectionObserver(
          el, //要监听谁把谁传过来
          ([{ isIntersecting }]) => {
            console.log(isIntersecting)
            /* 实现 渲染 懒加载 功能*/
            // el.src = binding.value
            stop() // 第一次加载完成之后停止监听
          },
        )
      },
    })
  },
}

// 在main.js 里面导入 并 app.use(lazyImg)
